// =============================================================================
// SCSS 变量使用示例
// =============================================================================

// 这个文件展示了如何使用全局 SCSS 变量
// 在实际项目中，您可以直接在组件中使用这些变量

// 示例组件样式
.example-component {
  // 使用颜色变量
  background-color: $bg-primary;
  color: $text-primary;
  border: 1px solid $border-color;
  
  // 使用字体变量
  font-family: $font-family-sans;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-normal;
  
  // 使用间距变量
  padding: $spacing-4;
  margin: $spacing-2;
  
  // 使用圆角变量
  border-radius: $border-radius-base;
  
  // 使用阴影变量
  @include shadow(md);
  
  // 使用过渡动画
  transition: $transition-base;
  
  // 响应式设计
  @include respond-to(md) {
    padding: $spacing-6;
    font-size: $font-size-lg;
  }
  
  // 使用工具类混入
  @include flex-center;
  
  // 按钮样式示例
  .btn {
    padding: $btn-padding-y $btn-padding-x;
    border-radius: $btn-border-radius;
    font-weight: $btn-font-weight;
    transition: $btn-transition;
    
    &.btn-primary {
      background-color: $primary-color;
      color: $white;
      
      &:hover {
        background-color: $primary-dark;
      }
    }
    
    &.btn-success {
      background-color: $success-color;
      color: $white;
      
      &:hover {
        background-color: $success-dark;
      }
    }
    
    &.btn-danger {
      background-color: $danger-color;
      color: $white;
      
      &:hover {
        background-color: $danger-dark;
      }
    }
  }
  
  // 表单样式示例
  .form-input {
    padding: $input-padding;
    border: 1px solid $input-border-color;
    border-radius: $input-border-radius;
    font-size: $font-size-base;
    
    &:focus {
      outline: none;
      border-color: $input-focus-border-color;
      box-shadow: $input-focus-shadow;
    }
  }
  
  // 卡片样式示例
  .card {
    background-color: $white;
    border-radius: $border-radius-lg;
    @include shadow(lg);
    padding: $spacing-6;
    
    .card-header {
      color: $text-primary;
      font-size: $font-size-xl;
      font-weight: $font-weight-semibold;
      margin-bottom: $spacing-4;
    }
    
    .card-body {
      color: $text-secondary;
      line-height: $line-height-relaxed;
    }
  }
  
  // 状态指示器示例
  .status {
    padding: $spacing-1 $spacing-3;
    border-radius: $border-radius-full;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    
    &.status-success {
      background-color: rgba($success-color, 0.1);
      color: $success-color;
    }
    
    &.status-warning {
      background-color: rgba($warning-color, 0.1);
      color: $warning-color;
    }
    
    &.status-danger {
      background-color: rgba($danger-color, 0.1);
      color: $danger-color;
    }
    
    &.status-info {
      background-color: rgba($info-color, 0.1);
      color: $info-color;
    }
  }
  
  // 渐变背景示例
  .gradient-bg {
    @include gradient(to right, $primary-color, $secondary-color);
    color: $white;
    padding: $spacing-8;
    border-radius: $border-radius-xl;
  }
  
  // 文本截断示例
  .text-truncate {
    @include text-truncate;
  }
  
  .text-truncate-2 {
    @include text-truncate-multiline(2);
  }
  
  // 居中定位示例
  .centered {
    @include center-absolute;
  }
  
  .flex-centered {
    @include flex-center;
  }
  
  // 隐藏滚动条示例
  .scrollable {
    @include hide-scrollbar;
    overflow-y: auto;
    max-height: 200px;
  }
}

// 响应式网格系统示例
.grid-system {
  display: grid;
  gap: $grid-gutter;
  
  // 移动端：单列
  grid-template-columns: 1fr;
  
  // 平板：两列
  @include respond-to(md) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  // 桌面：三列
  @include respond-to(lg) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  // 大屏：四列
  @include respond-to(xl) {
    grid-template-columns: repeat(4, 1fr);
  }
}

// 容器示例
.container {
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 $container-padding;
  
  @include respond-to(sm) {
    padding: 0 $spacing-6;
  }
  
  @include respond-to(lg) {
    padding: 0 $spacing-8;
  }
}

// 工具类示例
.utilities {
  // 间距工具类
  .p-0 { padding: $spacing-0; }
  .p-1 { padding: $spacing-1; }
  .p-2 { padding: $spacing-2; }
  .p-3 { padding: $spacing-3; }
  .p-4 { padding: $spacing-4; }
  .p-5 { padding: $spacing-5; }
  .p-6 { padding: $spacing-6; }
  
  .m-0 { margin: $spacing-0; }
  .m-1 { margin: $spacing-1; }
  .m-2 { margin: $spacing-2; }
  .m-3 { margin: $spacing-3; }
  .m-4 { margin: $spacing-4; }
  .m-5 { margin: $spacing-5; }
  .m-6 { margin: $spacing-6; }
  
  // 文本工具类
  .text-xs { font-size: $font-size-xs; }
  .text-sm { font-size: $font-size-sm; }
  .text-base { font-size: $font-size-base; }
  .text-lg { font-size: $font-size-lg; }
  .text-xl { font-size: $font-size-xl; }
  .text-2xl { font-size: $font-size-2xl; }
  .text-3xl { font-size: $font-size-3xl; }
  
  .font-light { font-weight: $font-weight-light; }
  .font-normal { font-weight: $font-weight-normal; }
  .font-medium { font-weight: $font-weight-medium; }
  .font-semibold { font-weight: $font-weight-semibold; }
  .font-bold { font-weight: $font-weight-bold; }
  
  // 颜色工具类
  .text-primary { color: $text-primary; }
  .text-secondary { color: $text-secondary; }
  .text-muted { color: $text-muted; }
  .text-light { color: $text-light; }
  .text-dark { color: $text-dark; }
  
  .bg-primary { background-color: $bg-primary; }
  .bg-secondary { background-color: $bg-secondary; }
  .bg-dark { background-color: $bg-dark; }
  .bg-light { background-color: $bg-light; }
  
  // 圆角工具类
  .rounded-none { border-radius: $border-radius-none; }
  .rounded-sm { border-radius: $border-radius-sm; }
  .rounded { border-radius: $border-radius-base; }
  .rounded-md { border-radius: $border-radius-md; }
  .rounded-lg { border-radius: $border-radius-lg; }
  .rounded-xl { border-radius: $border-radius-xl; }
  .rounded-2xl { border-radius: $border-radius-2xl; }
  .rounded-full { border-radius: $border-radius-full; }
  
  // 阴影工具类
  .shadow-sm { @include shadow(sm); }
  .shadow { @include shadow(base); }
  .shadow-md { @include shadow(md); }
  .shadow-lg { @include shadow(lg); }
  .shadow-xl { @include shadow(xl); }
  .shadow-2xl { @include shadow(2xl); }
} 